<!-- 特殊地区 item
 
 -->
<template>
    <view v-if="show" class="custom-area-item">
        <view class="line-box"></view>
        <view class="title">
            <text :class="{ 'change-color': !item.IsEnabled }" class="title-text">地区</text>
        </view>
        <view class="content">
            <text
                :class="{ 'change-color': !item.IsEnabled }"
                class="content-text"
                v-if="showAreas && showAreas.length > 0"
                >{{ showAreas.join("、") }}</text
            >
            <view
                :class="{ 'change-color': !item.IsEnabled }"
                class="btn-show-more"
                v-if="isShowMoreBtn"
                @click="changeShowMore">
                <text :class="{ 'change-color': !item.IsEnabled }" class="btn-show-more-text">{{
                    showMore ? "收起全部地区" : "展示全部地区"
                }}</text>
                <uni-icons :type="showMore ? 'arrowup' : 'arrowdown'" size="20" class="btn-show-more-icon"></uni-icons>
            </view>
        </view>
        <view class="price">
            <text :class="{ 'change-color': !item.IsEnabled }" class="price-label">资费：</text>
            <text :class="{ 'change-color': !item.IsEnabled }" class="desc-text"
                >{{ item.StartLimit }}{{ getUnit(item.CountWay) }}{{ item.StartPrice }}元起每{{ item.ContinueLimit
                }}{{ getUnit(item.CountWay) }}</text
            >
            <text :class="{ 'change-color': !item.IsEnabled }" class="desc-text price-text">{{
                item.ContinuePrice
            }}</text>
            <text :class="{ 'change-color': !item.IsEnabled }" class="desc-text">元</text>
        </view>
        <view class="action-bar">
            <text class="btn btn-gray-hollow" @click="$refs.delPop.open()">删除</text>
            <text class="btn btn-green-hollow" :class="{ 'btn-danger-hollow': item.IsEnabled }" @click="changeEnable">{{
                item.IsEnabled ? "禁用" : "启用"
            }}</text>
            <text class="btn btn-danger-hollow" @click="editFn">编辑</text>
        </view>
        <uni-popup ref="delPop" type="center">
            <view class="pop-up">
                <text class="pop-up-title">确认提示</text>
                <text class="pop-up-alert">确认删除该项目?</text>
                <view class="pop-up-operation">
                    <text class="pop-up-cancel" @click="closePopup()">取消</text>
                    <text class="pop-up-determine" @click="delFn">确认</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { EnablePostageArea, DeletePostageArea } from "@/pages_supplier/service/api/postage.js"
export default {
    data() {
        return {
            isShowMoreBtn: false,
            showMore: false,
            showAreas: [],
            show: true,
        }
    },
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        postageTemplateId: {
            type: String,
            default: "",
        },
    },
    mounted() {
        if (this.item && this.item.AreaList && this.item.AreaList.length > 5) {
            this.isShowMoreBtn = true
            let showAreas = this.item.AreaList.slice(0, 5)
            showAreas.forEach((e) => {
                this.showAreas.push(e.AreaPathName)
            })
        } else {
            this.item.AreaList.forEach((e) => {
                this.showAreas.push(e.AreaPathName)
            })
        }
    },
    methods: {
        getUnit(num) {
            switch (num) {
                case 0:
                    return "件"
                case 1:
                    return "千克"
                case 2:
                    return "m³"
            }
        },
        //删除
        delFn() {
            console.log(JSON.stringify(this.item))
            let param = {
                postageTemplateId: this.item.PostageTemplateId,
                ids: this.item.ID.toString(),
            }
            this.closePopup()
            DeletePostageArea(param).then((res) => {
                if (res.State == 1) {
                    this.show = false
                }
            })
            this.$forceUpdate()
        },
        //改变状态
        changeEnable() {
            if (this.item.IsEnabled == true) {
                this.item.IsEnabled = false
            } else {
                this.item.IsEnabled = true
            }
            let param = {
                postageTemplateId: this.item.PostageTemplateId,
                enabled: this.item.IsEnabled,
                ids: this.item.ID.toString(),
            }
            EnablePostageArea(param).then((res) => {})
            this.$forceUpdate()
        },
        //编辑
        editFn() {
            this.easyGoTo(
                "/pages_supplier/packet/freightTemplate/addRegion?id=" +
                    this.postageTemplateId +
                    "&areaID=" +
                    this.item.ID +
                    "&type=" +
                    this.item.PinkageType,
            )
        },
        //切换显示所有地区
        changeShowMore() {
            this.showMore = !this.showMore
            this.showAreas = []
            if (!this.showMore) {
                let showAreas = this.item.AreaList.slice(0, 5)
                showAreas.forEach((e) => {
                    this.showAreas.push(e.AreaPathName)
                })
            } else {
                this.item.AreaList.forEach((e) => {
                    this.showAreas.push(e.AreaPathName)
                })
            }
        },
        closePopup() {
            this.$refs.delPop.close()
        },
    },
}
</script>

<style lang="scss" scoped>
.change-color {
    color: $color-gray-3 !important;
}

.custom-area-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 94%;
    height: 1px;
    background-color: $color-gray-4;
}

.custom-area-item {
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: 2rpx;
    position: relative;
}

.title {
    margin-bottom: 14rpx;

    .title-text {
        font-size: $font-size-28;
        font-weight: bold;
    }
}

.content {
    background: #f4f5f6;
    padding: $app-page-padding;
    display: flex;
    flex-direction: column;

    .content-text {
        display: flex;
        line-height: 38rpx;
        font-size: $font-size-28;
        text-align: justify;
    }

    .btn-show-more {
        margin-top: 24rpx;
        display: flex;
        flex-direction: row;
        align-self: center;
        align-items: center;
        border: solid 1rpx #b9c0d0;
        border-radius: 50rpx;
        height: 50rpx;
        padding: 0 24rpx;

        .btn-show-more-text {
            margin-right: 10rpx;
        }
    }
}

.price {
    margin-top: 24rpx;

    text {
        font-size: $font-size-28;
    }

    .price-label {
    }

    .desc-text {
    }

    .price-text {
        color: $color-red;
    }
}

.action-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24rpx;

    .btn {
        height: 48rpx;
        padding: 0 36rpx;
        display: flex;
        font-size: $font-size-24;
        margin-left: 16rpx;
    }
}
.pop-up {
    background-color: $color-white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 20rpx;
    width: 620rpx;

    .pop-up-title {
        margin: 40rpx 0;
        font-size: 32rpx;
        font-weight: 550;
    }

    .pop-up-alert {
        text-align: center;
        font-size: 28rpx;
    }

    .pop-up-operation {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40rpx;
        border-top: 2rpx solid $color-gray-4;

        %pop-up-button {
            flex-grow: 1;
            text-align: center;
            line-height: 100rpx;
            font-size: 36rpx;
            font-weight: 550;
        }

        .pop-up-cancel {
            @extend %pop-up-button;
            border-right: 1rpx solid $color-gray-4;
        }

        .pop-up-determine {
            @extend %pop-up-button;
            color: $app-color-main;
        }
    }
}
</style>
